<template>
  <view class="content">
    <view class="headBg"></view>
    <view class="infobox">
      <view class="headImgBox" @click="upLoadHeadImg">
        <image class="headImg" :src="userInfo.headImg" />
      </view>
      <view class="userInfoBox">
        <view class="usernameBox">{{ userInfo.name || userInfo.phone }}</view>
        <view class="phoneBox">
          <fui-icon name="payment"></fui-icon>
          <text style="margin-left: 10rpx">{{ userInfo.points }}</text>
        </view>
      </view>
    </view>
    <view class="bodyBox">
      <fui-list>
        <fui-list-cell arrow @click="Nav.NavToPage('Tab5-SelfInfo')">
          <template v-slot>
            <fui-icon name="my"></fui-icon>
            <text style="padding-left: 20rpx">个人信息</text>
          </template>
        </fui-list-cell>
        <fui-list-cell arrow @click="Nav.NavToPage('Tab5-MoneyManage')">
          <template v-slot>
            <fui-icon name="payment"></fui-icon>
            <text style="padding-left: 20rpx">余额管理</text>
          </template>
        </fui-list-cell>
        <fui-list-cell arrow @click="Nav.NavToPage('Tab5-AddressManage')">
          <template v-slot>
            <fui-icon name="location"></fui-icon>
            <text style="padding-left: 20rpx">地址管理</text>
          </template>
        </fui-list-cell>
        <fui-list-cell arrow @click="Nav.NavToPage('Tab5-AddressManage')">
          <template v-slot>
            <fui-icon name="kefu"></fui-icon>
            <text style="padding-left: 20rpx">客户服务</text>
          </template>
        </fui-list-cell>
      </fui-list>
    </view>
    <fui-button background="#000" @click="logout">退出登录</fui-button>
  </view>
</template>

<script setup lang="ts">
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import fuiList from "@/components/firstui/fui-list/fui-list.vue";
import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.vue";
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue";
import { pathToBase64, base64ToPath } from "image-tools";
import Nav from "@/router";
import Store from "@/store";
import Service from "@/service";
import ServerInfo from "@/static/json/serverInfo.json";
import { ref } from "vue";
const userInfo = ref(Store.User.getUserInfo());
const logout = () => {
  Store.User.setIsLogin(false);
  Nav.NavReplacePage("Authoration");
};
const upLoadHeadImg = () =>
  uni.chooseImage({
    count: 1,
    success: function (chooseImageRes) {
      const tempFilePaths = chooseImageRes.tempFilePaths;
      uni.showLoading({
        title: "正在上传图片",
        mask: true,
      });
      pathToBase64(tempFilePaths[0]).then((res: any) => {
        Service.User.upload(res).then(res => {
          Service.User.detail().then(res => {
            Store.User.setUserInfo(res);
            userInfo.value = Store.User.getUserInfo();
            uni.hideLoading();
          });
        });
      });
    },
  });
</script>
<style scoped>
.content {
  width: 750rpx;
  min-height: calc(100vh - 120rpx);
  position: relative;
  background-color: #f8f8f8;
  padding-top: 20rpx;
}
.headBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 200rpx;
  background-color: black;
  z-index: 1;
}
.infobox {
  width: 690rpx;
  margin: 30rpx;
  height: 300rpx;
  position: relative;
  background-color: white;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 10rpx;
}
.headImgBox {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
}
.headImg {
  width: 200rpx;
  height: 200rpx;
}
.userInfoBox {
  width: 300rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.usernameBox {
  width: 300rpx;
  font-size: 50rpx;
  font-weight: bold;
}
.phoneBox {
  font-size: 44rpx;
  margin-top: 30rpx;
  font-weight: bold;
  height: 64rpx;
  line-height: 64rpx;
  vertical-align: top;
}
.bodyBox {
  width: 690rpx;
  margin: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
}
</style>
